/*
 * @Author: Setsuna
 * @Email: setsuna.xyz@qq.com
 * @FilePath: \src\pages\CustomerManage\OperatingItems\component\OperatingItemsForm.tsx
 * @Date: 2022-08-24 17:08:57
 * @LastEditTime: 2023-08-02 19:26:37
 * @LastEditors: Setsuna
 */

import React from 'react'
import { http, IUdFormItem, UdForm } from '@/lib'
import { Input, Table } from 'antd'
import { WrappedFormUtils } from 'antd/lib/form/Form'
import ProcessList from '@/components/ProcessList/index'
import apis from '@/apis/CustomerManage'
interface IProps {
  record: any
}
interface IState {
  recordDetail?: any
}

export default class ApproveForm extends React.Component<IProps, IState> {
  private labelCol: any = { span: 4 }
  private form: WrappedFormUtils
  private record = this.props.record || {}

  constructor(props: IProps, state: IState) {
    super(props)
    this.state = {
      recordDetail: { modifyType: null },
    }
  }
  componentDidMount() {
    this.getFromDetail()
  }

  private getFromDetail = () => {
    const {
      record: { id },
    } = this.props
    let params = { id }
    http.get(apis.getOperatingById, { params }).then(res => {
      let values = { ...res.data }
      this.setState({ recordDetail: values })
    })
  }

  render() {
    const columns = [
      {
        title: '物料名称',
        dataIndex: 'matName',
        key: 'matName',
      },
      {
        title: '物料编码',
        dataIndex: 'matCode',
        key: 'matCode',
      },
    ]
    let items: IUdFormItem[] = [
      { label: '品牌公司', id: 'brandName', render: () => <Input readOnly /> },
      { label: '客户编码', id: 'dealerCode', render: () => <Input readOnly /> },
      { label: '客户名称', id: 'dealerName', render: () => <Input readOnly /> },
      {
        label: '申请品项信息',
        id: 'operatingItems',
        wrapperCol: { span: 20 },
        render: (
          <>
            <Table rowKey="matCode" columns={columns} dataSource={this.state?.recordDetail?.['operatingItems'] || []} />
          </>
        ),
      },
    ]
    return (
      <>
        <UdForm
          getForm={form => (this.form = form)}
          labelCol={this.labelCol}
          items={items}
          values={this.state.recordDetail}
        />
        <ProcessList record={this.state.recordDetail} />
      </>
    )
  }
}
